<template>
  <div class="filter-result-wraper" @click='headerClick'>
    <span>{{ $store.state.headerData.minor.type }}</span>
    <span>-</span>
    <span>{{ $store.state.headerData.major.type }}</span>
    <i class="arrow"></i>
  </div>
</template>
<script>
export default {
  props: {
    
  },
  data () {
    return {
      
    }
  },
  mounted () {
    
  },
  methods: {
    headerClick: function() {
      this.$emit('headerToChildEvent', true);
    }
  }
};
</script>
<style lang='scss' scoped>
.filter-result-wraper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  color: #666;
  background-color: #fff;
  font-size: 0;
  z-index: 100;
  & > span {
    padding: 0 0.133rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
  }
  .arrow{
    display: inline-block;
    vertical-align: middle;
    width: 1.067rem;
    height: 1.067rem;
    background: url() 50% no-repeat;
    background-size: 60%;
    background-position: 50%;
    -webkit-transition: all .1s ease;
  }
}
</style>